<template>
  <div :id="controlid" class="apppreview"></div>
</template>
<script>
/* eslint-disable */
import Vue from 'vue'
import { loadScriptQueue } from '@/utils/loadScript'
export default {
  name: 'previewpage',
  data() {
    return { controlid: '', newhtmlid: '', childcomponent: null }
  },
  props: ['postData', 'propsData'],
  mounted() {},
  created() {
    this.controlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
    this.newhtmlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
  },
  mounted() {
    this.$nextTick(() => {
      this.previewinit(this.postData)
    })
  },
  methods: {
    buildLinks(links) {
      let strs = ''
      links.forEach(url => {
        strs += `<link href="${url}" rel="stylesheet">`
      })
      return strs
    },
    previewinit(event) {
      const $previewApp = document.getElementById(this.controlid)
      const code = event.data
      if (
        code === undefined ||
        code.js === undefined ||
        code.js === null ||
        code.html === undefined ||
        code.html === null
      ) {
        return
      }
      if (event.propsData !== undefined) {
        this.propsData = event.propsData
      }
      let attrs = ''
      if (this.propsData !== undefined) {
        this.propsArry = []
        for (let key in this.propsData) {
          this.propsArry.push(key)
          attrs = attrs + ' :' + key + '="propsData.' + key + '" '
        }
      }
      let links = ''
      if (Array.isArray(code.links) && code.links.length > 0) {
        links = this.buildLinks(code.links)
      }
      $previewApp.innerHTML = `${links}<style scoped>${code.css}</style><div id="${this.newhtmlid}" ></div>`
      if (Array.isArray(code.scripts) && code.scripts.length > 0) {
        loadScriptQueue(code.scripts, () => {
          this.newVue(attrs, code.js, code.html)
        })
      } else {
        this.newVue(attrs, code.js, code.html)
      }
    },
    newVue(attrs, main, html) {

      main = eval(`(${main})`)

      this.$emit('initFrom', main)
      if (main.props !== undefined && this.propsArry !== undefined) {
        this.propsArry.forEach(ee => {
          if (main.props.indexOf(ee) < 0) {
            main.props.push(ee)
          }
        })
      } else if (this.propsArry !== undefined) {
        main.props = this.propsArry
      }
      main.template = `<div>${html}</div>`
      const propsData = this.propsData
      let userinfo = this.$user.state.user
      const childvue = new Vue({
        components: {
          child: main
        },
        computed: {},
        data() {
          return {
            visible: true,
            propsData: propsData,
            user: userinfo
          }
        },
        template: `<div ><child ${attrs} :$user="this.user"/></div>`
      }).$mount('#' + this.newhtmlid)
      this.childcomponent = childvue.$children[0]
      this.$emit('loadcomplete', this.childcomponent)

    }
  },
  watch: {}
}
</script>
<style scope>
.el-form-item__label{

    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
}
</style>